<template>
	<div class="customer-order">
		<el-card>
			<div class="header">
				<el-button type="primary" @click="addOrder">新增订单</el-button>
				<el-input v-model="searchProduct" placeholder="搜索产品名称" style="width: 200px; margin-left: 10px"
					clearable />
				<el-date-picker v-model="searchDate" placeholder="筛选交付日期" style="margin-left: 10px"
					value-format="YYYY-MM-DD" clearable />
			</div>

			<el-table :data="filteredOrders" style="width: 100%; margin-top: 20px" border stripe>
				<el-table-column prop="orderId" label="订单编号" sortable></el-table-column>
				<el-table-column prop="productCode" label="产品编号" sortable></el-table-column>
				<el-table-column prop="productName" label="产品名称" sortable></el-table-column>
				<el-table-column prop="spec" label="规格" sortable></el-table-column>
				<el-table-column prop="quantity" label="数量" sortable></el-table-column>
				<el-table-column prop="deliveryDate" label="交付日期" sortable></el-table-column>
				<el-table-column fixed="right" label="操作" width="140">
					<template #default="scope">
						<el-button size="small" type="primary" @click="editOrder(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteOrder(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 编辑/新增弹窗 -->
		<el-dialog v-model="dialogVisible" title="订单信息" width="500px">
			<el-form :model="currentOrder" label-width="100px">
				<el-form-item label="订单编号">
					<el-input v-model="currentOrder.orderId" />
				</el-form-item>
				<el-form-item label="产品编号">
					<el-input v-model="currentOrder.productCode" />
				</el-form-item>
				<el-form-item label="产品名称">
					<el-input v-model="currentOrder.productName" />
				</el-form-item>
				<el-form-item label="规格">
					<el-input v-model="currentOrder.spec" />
				</el-form-item>
				<el-form-item label="数量">
					<el-input-number v-model="currentOrder.quantity" :min="1" />
				</el-form-item>
				<el-form-item label="交付日期">
					<el-date-picker v-model="currentOrder.deliveryDate" type="date" placeholder="选择日期"
						value-format="YYYY-MM-DD" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveOrder">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const orders = ref([
	{ orderId: 'ORD202405001', productCode: 'MED1001', productName: '阿莫西林胶囊', spec: '0.5g*24粒', quantity: 200, deliveryDate: '2024-06-01' },
	{ orderId: 'ORD202405002', productCode: 'MED1002', productName: '布洛芬片', spec: '0.2g*100片', quantity: 150, deliveryDate: '2024-06-05' },
	{ orderId: 'ORD202405003', productCode: 'MED1003', productName: '维生素C片', spec: '100mg*60片', quantity: 300, deliveryDate: '2024-06-10' },
	{ orderId: 'ORD202405004', productCode: 'MED1004', productName: '头孢克肟分散片', spec: '50mg*10片', quantity: 100, deliveryDate: '2024-06-12' },
	{ orderId: 'ORD202405005', productCode: 'MED1005', productName: '葡萄糖注射液', spec: '250ml*1瓶', quantity: 80, deliveryDate: '2024-06-15' },
	{ orderId: 'ORD202405006', productCode: 'MED1006', productName: '生理盐水', spec: '500ml*1瓶', quantity: 120, deliveryDate: '2024-06-18' },
	{ orderId: 'ORD202405007', productCode: 'MED1007', productName: '硫酸庆大霉素注射液', spec: '80mg*2ml', quantity: 60, deliveryDate: '2024-06-20' },
	{ orderId: 'ORD202405008', productCode: 'MED1008', productName: '阿司匹林肠溶片', spec: '100mg*30片', quantity: 220, deliveryDate: '2024-06-22' },
	{ orderId: 'ORD202405009', productCode: 'MED1009', productName: '复方甘草片', spec: '100片/瓶', quantity: 180, deliveryDate: '2024-06-25' },
	{ orderId: 'ORD202405010', productCode: 'MED1010', productName: '左氧氟沙星片', spec: '500mg*6片', quantity: 140, deliveryDate: '2024-06-28' },
	{ orderId: 'ORD202405011', productCode: 'MED1011', productName: '盐酸特比萘芬片', spec: '250mg*7片', quantity: 90, deliveryDate: '2024-07-01' },
	{ orderId: 'ORD202405012', productCode: 'MED1012', productName: '硫酸亚铁片', spec: '60mg*100片', quantity: 130, deliveryDate: '2024-07-03' },
	{ orderId: 'ORD202405013', productCode: 'MED1013', productName: '氯化钠注射液', spec: '500ml*1瓶', quantity: 75, deliveryDate: '2024-07-05' },
	{ orderId: 'ORD202405014', productCode: 'MED1014', productName: '多潘立酮片', spec: '10mg*30片', quantity: 160, deliveryDate: '2024-07-08' },
	{ orderId: 'ORD202405015', productCode: 'MED1015', productName: '乳酸左氧氟沙星注射液', spec: '100ml*1瓶', quantity: 110, deliveryDate: '2024-07-10' },
])

const searchProduct = ref('')
const searchDate = ref('')
const dialogVisible = ref(false)
const currentOrder = ref({})

// 搜索过滤
const filteredOrders = computed(() => {
	return orders.value.filter(order => {
		const productMatch = !searchProduct.value || order.productName.includes(searchProduct.value)
		const dateMatch = !searchDate.value || order.deliveryDate === searchDate.value
		return productMatch && dateMatch
	})
})

// 新增订单
const addOrder = () => {
	currentOrder.value = { orderId: '', productCode: '', productName: '', spec: '', quantity: 1, deliveryDate: '' }
	dialogVisible.value = true
}

// 编辑订单
const editOrder = (row) => {
	currentOrder.value = { ...row }
	dialogVisible.value = true
}

// 保存订单
const saveOrder = () => {
	if (!currentOrder.value.orderId) {
		ElMessage.error('订单编号不能为空')
		return
	}
	if (!currentOrder.value.deliveryDate) {
		ElMessage.error('交付日期不能为空')
		return
	}
	const index = orders.value.findIndex(o => o.orderId === currentOrder.value.orderId)
	if (index >= 0) {
		orders.value[index] = { ...currentOrder.value }
		ElMessage.success('订单已更新')
	} else {
		orders.value.push({ ...currentOrder.value })
		ElMessage.success('订单已新增')
	}
	dialogVisible.value = false
}

// 删除订单
const deleteOrder = (row) => {
	orders.value = orders.value.filter(o => o.orderId !== row.orderId)
	ElMessage.success('订单已删除')
}
</script>

<style scoped>
.customer-order .header {
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
  
